import { useState, startTransition } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Modal } from "antd";

const LoginFailure = () => {
  const navigate = useNavigate();
  const [open, setOpen] = useState(true);
  const handleOk = () => {
    localStorage.clear();
    setOpen(false);
    // 包装异步更新，以避免组件挂起导致页面报错情况。
    startTransition(() => {
      navigate("/login");
    });
  };
  return (
    <Modal
      title="温馨提示"
      open={open}
      onOk={handleOk}
      footer={[
        <Button key="submit" type="primary" onClick={handleOk}>
          确定
        </Button>
      ]}
    >
      <div>登录信息失效，即将跳转到登录页面重新登录</div>
    </Modal>
  );
};

export default LoginFailure;
